<template>
  <div class="app-container">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <label style="font-size: 16px; font-weight: 100; margin-right: 10px;">{{ $t('Manage.searchPlaceholder14') }}</label>
        <el-select v-model="stationName" :placeholder="$t('Manage.searchPlaceholder14')" @change="handlerChange">
          <el-option
            v-for="item in cacheRacksList"
            :key="item.id"
            :label="item.uiName"
            :value="item.stationName"
            :disabled="item.stationStatus === 1"
          />
        </el-select>
      </div>
      <el-button v-permission="['admin','shelf:clear']" type="danger" size="medium" @click="selectVisible = true">{{ $t('shelvesDisassem.clearCache') }}</el-button>
    </div>
    <div style="margin-top: 20px;height: 76vh; display: flex; flex-direction: row;gap: 40px;">
      <div v-for="(item, index) in cacheRacks" :key="index" style="display: flex; flex: 1;">
        <el-descriptions
          class="margin-top"
          :title="$t('unbinding.orderInfo')"
          :column="1"
          :label-style="{ fontSize: '24px', fontWeight: '600' }"
          :content-style="{ fontSize: '24px' }"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              {{ $t("unbinding.unbindingOrderCode1") }}
            </template>
            {{ item.unbindingOrderCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("unbinding.workingPress") }}
            </template>
            {{ item.pressMachineName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("unbinding.potId") }}
            </template>
            {{ item.potId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("outbound.processcardCode") }}
            </template>
            {{ item.processcardCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("processcard.workNum") }}
            </template>
            {{ item.workNum }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("inventory.layerName") }}
            </template>
            {{ item.layerName }}
          </el-descriptions-item>
        </el-descriptions>
        <el-card class="box-card" style="height: 76vh; width: 300px;margin-left: 20px;">
          <div slot="header" class="clearfix">
            <span>{{ $t('shelvesDisassem.cacheRackName1') + item.cacheRackName }}</span>
          </div>
          <div style="display: flex;flex-direction: column-reverse;">
            <!-- 渲染實際的 -->
            <div
              v-for="(item2, index2) in item.orderDetails || []"
              :key="'order-' + index2"
              style="margin-bottom: 10px;display: flex;align-items: center;justify-content: center;height: 35px;border-bottom: 2px solid #efefef;"
            >
              <div style="display: flex;flex-direction: column;">
                <div>{{ item2.palletCode }}</div>
              </div>
            </div>
            <!-- 渲染空的 -->
            <div
              v-for="index2 in emptySlots(item.orderDetails ? item.orderDetails.length : 0)"
              :key="'empty-' + index2"
              style="height: 35px;border-bottom: 2px solid #efefef;justify-content: center;display: flex;align-items: center;"
            >
              <div style="opacity: 0;">null</div>
            </div>
          </div>
          <!-- <span style="display: flex;align-items: center;justify-content: center;margin-top: 20px;">{{ $t('shelvesDisassem.unbindingOrderCode1') + item.orderDetails && item.orderDetails.length > 0 ? item.orderDetails[0].unbindingOrderCode : '' }}</span> -->
        </el-card>
      </div>
    </div>
    <!-- 表单渲染 -->
    <el-dialog :title="$t('shelvesDisassem.release')" :visible.sync="show" width="30%" @close="cancel">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item :label="$t('shelvesDisassem.stationName')" :label-width="formLabelWidth" prop="stationName">
          <el-select v-model="form.stationName" :placeholder="$t('Manage.searchPlaceholder14')">
            <el-option v-for="(item, index) in UnbindingStations" :key="index" :label="item.uiName" :value="item.stationName" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t('crud.cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $t('crud.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 强制清除缓存货架表单渲染 -->
    <el-dialog :title="$t('shelvesDisassem.clearCache')" :visible.sync="selectVisible" width="30%" @close="selectVisible = false">
      <el-form :model="forceForm">
        <el-form-item :label="$t('shelvesDisassem.cacheRack')" :label-width="formLabelWidth">
          <el-select v-model="forceForm.stationName" :placeholder="$t('Manage.searchPlaceholder14')">
            <el-option
              v-for="item in cacheRacksList"
              :key="item.id"
              :label="item.uiName"
              :value="item.stationName"
              :disabled="item.stationStatus === 1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectVisible = false">{{ $t('crud.cancel') }}</el-button>
        <el-button type="primary" @click="submitForce">{{ $t('crud.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getShelvesListAPI, getAllStationStatusAPI, releaseShelvesAPI, getAllCacheRacksAPI } from '@/api/shelvesDisassem'
import { forceOrderAPI } from '@/api/workStation'
import i18n from '@/lang'
export default {
  data() {
    return {
      cacheRacksList: [],
      cacheRacks: [],
      orderDetails: [],
      UnbindingStations: [],
      stationName: '',
      show: false,
      selectVisible: false,
      form: {
        shelevsName: ''
      },
      forceForm: {
        stationName: ''
      },
      formLabelWidth: '100px',
      rules: {
        stationName: [
          { required: true, message: i18n.t('Manage.searchPlaceholder14'), trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getShelvesList()
    this.getAllStationStatus()
    this.getAllCacheRacks()
  },
  methods: {
    // 强制清除緩存貨架
    submitForce(val) {
      forceOrderAPI(this.forceForm.stationName).then(res => {
        if (res.meta.code === 200) {
          this.$message.success(res.meta.msg)
          this.selectVisible = false
          this.forceForm = {
            station: ''
          }
          this.$nextTick(() => {
            this.getShelvesList()
          })
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    },
    // 下拉选择触发弹框
    handlerChange(val) {
      this.show = true
    },
    async getShelvesList() {
      const res = await getShelvesListAPI()
      if (res.meta.code === 200) {
        this.cacheRacks = res.data.cacheRacks
      }
    },
    async getAllStationStatus() {
      const res = await getAllStationStatusAPI()
      if (res.meta.code === 200) {
        this.UnbindingStations = res.data.UnbindingStations
      }
    },
    async getAllCacheRacks() {
      const res = await getAllCacheRacksAPI()
      if (res.meta.code === 200) {
        this.cacheRacksList = res.data.CacheRacks
      }
    },
    emptySlots(currentLength) {
      const totalSlots = 12
      const emptyCount = totalSlots - currentLength
      return Math.max(emptyCount, 0)
    },
    cancel() {
      this.stationName = ''
      this.form = {
        stationName: ''
      }
      this.show = false
    },
    submit() {
      this.$refs.formRef.validate(async(valid) => {
        if (valid) {
          const submitForm = {
            cacheRackName: this.stationName,
            unbindingStationName: this.form.stationName
          }
          const res = await releaseShelvesAPI(submitForm)
          if (res.meta.code === 200) {
            this.$message.success(res.meta.msg)
            this.stationName = ''
            this.form = {
              stationName: ''
            }
            this.show = false
          } else {
            this.$message.warning(res.meta.msg)
            this.stationName = ''
            this.form = {
              stationName: ''
            }
            this.show = false
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
